<template>
    <div class="smart_container_rightBlock smart_browser">
        <TopNav @changeLangEvent='changeLangEvent'/>
        <div class="smart_container_rightBlock_scroll">
            <!-- <div class="smart_container_rightBlock_title">
                {{$setI18n('lang_br_overview','概览')}}
            </div> -->
            <div class="smart_hash_list">
                <div class="smart_hash_list_lis smart_nav_bg1">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.globalHashRate }}</span>
                        <span class="hash">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalHashRate }}</span> -->
                    </div>
                </div>

                <div class="smart_hash_list_lis smart_nav_bg2">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks" style="font-size:24px">{{ topList.globalDifficulty && Math.floor(parseFloat(topList.globalDifficulty)*100000000000000)/100000000000000 }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                    </div>
                </div>
                <!-- && parseFloat(topList.globalDifficulty).toFixed(8)  -->
                <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                <div class="smart_hash_list_lis smart_nav_bg3">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.currentBlockHeight }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_heigh','全网高度')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                    </div>
                </div>
                <div class="smart_hash_list_lis smart_nav_bg4">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ top4.blockNumber }}</span>
                        <span class="hash">{{$setI18n('lang_br_blockNumber','分片数')}}</span>
                        <!-- <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span> -->
                    </div>
                </div>
            </div>

            <div class="smart_hash_list1">
                <div class="smart_hash_list_lis smart_nav_bg22">
                    <div class="smart_hash_list_lisLeft">
                        <span class="ks">{{ topList.globalDifficulty && parseFloat(topList.globalDifficulty) }}</span>
                        <span class="hash">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                    </div>
                </div>
            </div>

            <div class="smart_block_clearFix">
                <div class="smart_searchBlock smart_qkMessageBlock_right_block">
                    <div class="smart_searchBlock_border">
                        <div class="search_label">{{$setI18n('lang_br_search_label','查询地址，合约，交易块哈希，主块哈希，主节点ID等')}}</div>
                        <div class="smart_searchBlock_rightText">
                            <input type="text"
                                   :placeholder="$setI18n('lang_br_search_label','请输入交易记录或需要查询的地址')"
                                   v-model.trim="addressParms"/>
                            <div class="searchButton" @click="handleSearch"></div>
                        </div>

                    </div>
                    <div class="smart_searchBlock_border_phone">
                        <div class="smart_searchBlock_rightText">
                            <input type="text"
                                   :placeholder="$setI18n('lang_br_search_label','请输入交易记录或需要查询的地址')"
                                   v-model.trim="addressParms"/>
                            <div class="searchButton" @click="handleSearch"></div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- <div class="smart_container_qkMessageBlock" >
              <div class="left">
                <span class="label">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                <span class="cont">{{topList.globalHashRate}}</span>
              </div>
            </div> -->


            <div class="search_hash" v-if="isShowJyTable">
                <div class="flex">
                    <span class="label">{{$setI18n('lang_br_hash','哈希值')}}</span>
                    <span class="cont">{{addressParms}}</span>
                </div>
            </div>

            <div class="search_hash_phone" v-if="isShowJyTable">
                <div class="flex">
                    <span class="label">{{$setI18n('lang_br_hash','哈希值')}}</span>
                    <span class="cont">{{addressParms && addressParms.substring(0,30) + '...'}}</span>
                </div>
            </div>

            <div class="max_width1">

                <div class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">
                    {{$setI18n('lang_br_overview','概览')}}
                </div>
            </div>
            <div class="smart_container_qkMessageBlock11">
                <div class="left">
                    <div class="smart_container_tableList">
                        <div class="smart_container_dz_table">
                            <!-- smart_main类型 -->
                            <!-- 主块信息 -->
                            <div class="smart_main">
                                <!-- <div>主块信息</div> -->
                                <div class="main_flex">
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_calculationPower','哈希算力')}}</span>
                                        <span class="cont orange">{{ topList.globalHashRate }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_heigh','全网高度')}}</span>
                                        <span class="gray cont orange">{{ topList.currentBlockHeight }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_blockNumber','分片数')}}</span>
                                        <span class="cont orange">{{ top4.blockNumber }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="max_width" v-if="money && isShowDzTable">
                <div class="amount_bg">
                    <div class="amount">{{money}} <span> SAT</span></div>
                    <div class="amount_info"> {{ $setI18n('lang_br_allBalanse', '账户余额')}}</div>
                </div>
            </div>

            <div class="max_width">
                <div v-if="isSmartxMain==true" class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">{{
                    $setI18n('lang_br_mainBlockInfo', '主块信息')}}
                </div>
                <div v-else class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block" v-text="titleBar"></div>
            </div>

            <div class="smart_container_qkMessageBlock">
                <div class="left">
                    <div class="smart_container_tableList  smart_tableForAdress" v-if="isShowDzTable">
                        <Tabs value="name1" v-if="accountTransactionsList" @on-click="changeTabs">
                            <TabPane :label="$setI18n('lang_br_transactionNormal', '普通交易')" name="name1">
                                <Table :row-class-name="rowClassName" :columns="columns2"
                                       :data="accountTransactionsList">
                                    <template slot-scope="{ row }" slot="hash">
                                        <div @click="selected(row)">
                                            <Tooltip max-width="300" :transfer="true" :content="row.hash">
                                                {{row.hash && row.hash.substring(0,39) + '...'}}
                                            </Tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="amount">
                                        <div>
                                            {{row.amount ? (row.amount/exchangeRateRatio): 0}} SAT
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="type">
                                        <div v-if="row.addressOut">
                                            <Button type="info" v-if="row.addressIn !==  addressParms ">
                                                {{$setI18n('lang_br_from', '转出')}}
                                            </Button>
                                            <Button type="warning" v-if="row.addressIn ==  addressParms ">
                                                {{$setI18n('lang_br_to', '转入')}}
                                            </Button>
                                        </div>
                                        <div v-else>
                                            <Button type="success">
                                                {{$setI18n('lang_br_create', '创建代币')}}
                                            </Button>
                                        </div>
                                    </template>
                                </Table>
                            </TabPane>
                            <TabPane :label="$setI18n('lang_br_transactionPrivite', '代币交易')" name="name2">
                                <Table class="pcshow" :row-class-name="rowClassName" :columns="columns3"
                                       :data="accountList">
                                    <template slot-scope="{ row }" slot="hash">
                                        <div @click="selected(row)">
                                            <Tooltip max-width="300" :transfer="true" :content="row.hash">
                                                {{row.hash && row.hash.substring(0,39) + '...'}}
                                            </Tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="amount">
                                        <div>
                                            {{row.data && row.data.substring(row.data.indexOf('(') +
                                            2,row.data.indexOf(')') -
                                            1).split(',')[row.data.substring(row.data.indexOf('(') +
                                            2,row.data.indexOf(')') - 1).split(',').length-1].substring(1)}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="name">
                                        <div>
                                            {{row.temp && row.temp[0]}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="type">
                                        <div v-if="row.addressOut">
                                            <Button type="info" v-if="row.addressIn !==  addressParms ">
                                                {{$setI18n('lang_br_from', '转出')}}
                                            </Button>
                                            <Button type="warning" v-if="row.addressIn ==  addressParms ">
                                                {{$setI18n('lang_br_to', '转入')}}
                                            </Button>
                                        </div>
                                        <div v-else>
                                            <Button type="success">
                                                {{$setI18n('lang_br_create', '创建代币')}}
                                            </Button>
                                        </div>

                                    </template>
                                </Table>
                                <Table class="phoneshow" :row-class-name="rowClassName" :columns="columns3_phone"
                                       :data="accountList">
                                    <template slot-scope="{ row }" slot="hash">
                                        <div @click="selected(row)">
                                            <Tooltip max-width="300" :transfer="true" :content="row.hash">
                                                {{row.hash && row.hash.substring(0,39) + '...'}}
                                            </Tooltip>
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="amount">
                                        <div>
                                            {{row.data && row.data.replace(" ","").substring(row.data.indexOf('(') +
                                            2,row.data.indexOf(')') -
                                            1).split(',')[row.data.substring(row.data.indexOf('(') +
                                            2,row.data.indexOf(')') - 1).split(',').length-1].substring(1)}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="name">
                                        <div>
                                            {{row.temp && row.temp[0]}}
                                        </div>
                                    </template>
                                    <template slot-scope="{ row }" slot="type">
                                        <div v-if="row.addressOut">
                                            <Button type="warning" v-if="row.addressIn !==  addressParms ">
                                                {{$setI18n('lang_br_to', '转入')}}
                                            </Button>
                                            <Button type="info" v-if="row.addressIn ==  addressParms ">
                                                {{$setI18n('lang_br_from', '转出')}}
                                            </Button>
                                        </div>
                                        <div v-else>
                                            <Button type="success">
                                                {{$setI18n('lang_br_create', '创建代币')}}
                                            </Button>
                                        </div>

                                    </template>
                                </Table>
                            </TabPane>
                        </Tabs>

                    </div>
                    <div class="smart_container_tableList" v-if="isShowJyTable">
                        <div class="smart_container_dz_table">
                            <!-- smart_main类型 -->
                            <!-- 主块信息 -->
                            <div class="smart_main" v-if="isSmartxMain == true">
                                <!-- <div>主块信息</div> -->
                                <div class="main_flex">
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                                        <span class="gray cont orange">{{ accountTransactionsDetail.height }}</span>
                                    </div>
                                    <!-- <div class="flex">
                                      <span class="label">{{$setI18n('lang_br_Whole_network_difficulty','全网难度')}}</span>
                                      <span class="gray cont">{{ accountTransactionsDetail.difficulty }}</span>
                                    </div> -->

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_Weights','权重值')}}</span>
                                        <span class="cont">{{accountTransactionsDetail.linkstran && Object.values(accountTransactionsDetail.linkstran).length}}</span>
                                    </div>

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_gg','矿工')}}</span>
                                        <span class="gray cont orange smart_container_pc"
                                              v-clipboard:copy="accountTransactionsDetail.Address"
                                              v-clipboard:success="onCopySuccess">{{ accountTransactionsDetail.Address}}</span>
                                        <span class="gray cont orange smart_container_tableList_phone"
                                              v-clipboard:copy="accountTransactionsDetail.Address"
                                              v-clipboard:success="onCopySuccess">{{ accountTransactionsDetail.Address && accountTransactionsDetail.Address.substring(0,20) + '...' }}</span>
                                    </div>

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_Numberofverificationnodes','验证节点数')}}</span>
                                        <span class="cont">{{accountTransactionsDetail.linksblk && Object.values(accountTransactionsDetail.linksblk).length}}</span>
                                    </div>

                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_sjs','随机数')}}</span>
                                        <span class="gray cont">{{ accountTransactionsDetail.random }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_time','时间')}}</span>
                                        <span class="cont">{{ formatTime(accountTransactionsDetail.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- smart_txs类型 -->
                            <div class="smart_main" v-if="isSmartxMain == false">
                                <!-- <div>交易信息</div> -->
                                <div class="main_flex" v-if="accountTransactionsDetail">
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_hash','交易哈希')}}</span>
                                        <span class="cont orange smart_container_pc">{{ accountTransactionsDetail.hash }}</span>
                                        <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.hash && accountTransactionsDetail.hash.substring(0,20) + '...' }}</span>
                                    </div>
                                    <div class="flex gray">
                                        <span class="label">{{$setI18n('lang_br_fromer','转入方')}}</span>
                                        <span class="cont smart_container_pc">{{ accountTransactionsDetail.addressIn}}</span>
                                        <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressIn && accountTransactionsDetail.addressIn.substring(0,20) + '...' }}</span>
                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_br_toer','转出方')}}</span>
                                        <span class="cont smart_container_pc">{{ accountTransactionsDetail.addressOut}}</span>
                                        <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressOut && accountTransactionsDetail.addressOut.substring(0,20) + '...' }}</span>
                                    </div>
                                    <div class="flex gray">
                                        <span class="label">{{$setI18n('lang_value','金额')}}</span>
                                        <span class="cont orange" v-if="accountTransactionsDetail.type !='contract'">{{ accountTransactionsDetail.amount }} SAT</span>
                                        <span class="cont orange" v-else>{{accountTransactionsDetail.data &&  accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',')[accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',').length-1].substring(1)}} {{accountTransactionsDetail.temp && accountTransactionsDetail.temp[0]}}</span>

                                    </div>
                                    <div class="flex">
                                        <span class="label">{{$setI18n('lang_time','时间')}}</span>
                                        <span class="cont">{{ formatTime(accountTransactionsDetail.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                                    </div>
                                    <div class="flex gray">
                                        <span class="label">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                                        <span class="cont">{{ accountTransactionsDetail.height }}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- 默认展示 -->
                    <div class="smart_container_tableList smart_container_pc" v-if="isShowDefalutTable">
                        <div class="smart_container_dz_table">
                            <!-- :row-class-name="rowClassName" -->
                            <Table :columns="columns" :data="tableList">
                                <template slot-scope="{ row }" slot="linksblk">
                                    <div>
                                        {{ row.linksblk && Object.values(row.linksblk).length}}
                                    </div>
                                </template>
                                <template slot-scope="{ row }" slot="vmCount">
                                    <div>
                                        {{ row.linkstran && Object.values(row.linkstran).length}}
                                    </div>
                                </template>
                                <template slot="none">
                                    {{0}}
                                </template>
                                <template slot-scope="{ row }" slot="timestamp">
                                    {{formatTime(row.timestamp,'YYYY-MM-dd hh:mm:ss')}}
                                </template>
                            </Table>
                        </div>
                    </div>

                    <!-- 默认展示 手机-->

                    <div class="smart_container_tableList_phone" v-if="isShowDefalutTable">
                        <div class="smart_main">
                            <div class="main_flex" v-for="item in tableList" :key="item.height">
                                <div class="flex">
                                    <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                                    <span class="cont">{{ item.height }}</span>
                                </div>
                                <div class="flex">
                                    <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_hash','哈希值')}}</span>
                                    <span class="gray cont" v-clipboard:copy="item.hash"
                                          v-clipboard:success="onCopySuccess">{{ item.hash && item.hash.substring(0,10) + '...' + item.hash && item.hash.substring(item.hash.length-10)}} </span>
                                </div>

                                <div class="flex">
                                    <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_transactionNumber','交易笔数')}}</span>
                                    <span class="cont">{{item.linkstran && Object.values(item.linkstran).length}}</span>
                                </div>

                                <div class="flex">
                                    <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_blockNumber','分片数')}}</span>
                                    <span class="gray cont">{{ item.linksblk && Object.values(item.linksblk).length}}</span>
                                </div>

                                <div class="flex">
                                    <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_time','时间')}}</span>
                                    <span class="cont ">{{ formatTime(item.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                                </div>
                                <div class="flex">
                                    <span class="label" :class="$setI18n('lang_chinese') == 'Chinese' ? 'w100' : ''">{{$setI18n('lang_br_broadcasts','播报方')}}</span>
                                    <span class="cont gray" v-clipboard:copy="item.Address"
                                          v-clipboard:success="onCopySuccess">{{ item.Address && item.Address.substring(0,20) + '...' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>

            <div class="max_width pages 1" v-if="isShowDefalutTable">
                <!-- show-elevator -->
                <Page :total="totalPage" :current="nowIndex" @on-change="handleChange"
                      :prev-text="$setI18n('lang_br_prev','上一页')" :next-text="$setI18n('lang_br_next','下一页')"/>
            </div>

            <div class="max_width pages 2" v-if="!pageShow && accountTransactionsList && isShowDzTable">
                <Page :total="1000000" @on-change="handleChangeAcount" :prev-text="$setI18n('lang_br_prev','上一页')"
                      :next-text="$setI18n('lang_br_next','下一页')"/>
            </div>

            <div class="max_width pages 3" v-if="pageShow && accountList.length >= 11 && isShowDzTable">
                <Page :total="1000000" @on-change="handleChangeMoneyAcount" :prev-text="$setI18n('lang_br_prev','上一页')"
                      :next-text="$setI18n('lang_br_next','下一页')"/>
            </div>

            <div class="max_width" v-if="mctxlist == true">
                <div v-if="isSmartxMain==true && mctxlist == true"
                     class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">
                    {{$setI18n('lang_br_transactionList','交易列表')}}
                </div>
            </div>

            <div class="smart_container_qkMessageBlock" v-if="mctxlist == true">
                <!-- 交易列表 -->
                <div class="left smart_container_mc smart_container_pc smart_mctxlist" v-if="mctxlist === true">
                    <Table :row-class-name="rowClassName" :columns="columns1"
                           :data="Object.values(accountTransactionsDetail.linkstran)">
                        <template slot-scope="{ row }" slot="amount">
                            <div>
                                {{row.amount ? (row.amount/exchangeRateRatio): 0}} SAT
                            </div>
                        </template>
                        <template slot-scope="{ row }" slot="timestamp">
                            {{formatTime(row.timestamp,'YYYY-MM-dd hh:mm:ss')}}
                        </template>
                    </Table>
                </div>

                <div class="smart_container_tableList_phone pd20" v-if="mctxlist == true">
                    <div v-if="Object.values(accountTransactionsDetail.linkstran).length == 0"
                         style="text-align: center;margin: 30px">
                        暂无数据
                    </div>
                    <div class="smart_main" v-if="Object.values(accountTransactionsDetail.linkstran).length">
                        <div class="main_flex" v-for="item in Object.values(accountTransactionsDetail.linkstran)"
                             :key="item.hash">
                            <div class="flex">
                                <span class="label">{{$setI18n('lang_hash','交易哈希')}}</span>
                                <span class="cont" @click="selected(item)">{{ item.hash && item.hash.substring(0,20) + '...' }}</span>
                            </div>
                            <div class="flex">
                                <span class="label">{{$setI18n('lang_br_toer','转出方')}}</span>
                                <span class="gray cont" v-clipboard:copy="item.addressOut"
                                      v-clipboard:success="onCopySuccess">{{ item.addressOut && item.addressOut.substring(0,20) + '...'}} </span>
                            </div>

                            <div class="flex">
                                <span class="label">{{$setI18n('lang_br_fromer','转入方')}}</span>
                                <span class="cont" v-clipboard:copy="item.addressIn"
                                      v-clipboard:success="onCopySuccess">{{item.addressIn && item.addressIn.substring(0,20) + '...'}}</span>
                            </div>

                            <div class="flex">
                                <span class="label">{{$setI18n('lang_value','金额')}}</span>
                                <span class="gray cont ">{{item.amount}}</span>
                            </div>
                            <div class="flex">
                                <span class="label">{{$setI18n('lang_time','时间')}}</span>
                                <span class="cont ">{{ formatTime(item.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="max_width" v-if="isShowJyTable && isSmartxMain == false && accountTransactionsDetail">
                <div v-if="isSmartxMain==false" class="smart_qkMessageBlock_left smart_qkMessageBlock_left_block">
                    {{$setI18n('lang_br_transactionDetails','交易详情')}}
                </div>
            </div>

            <div class="smart_container_qkMessageBlock"
                 v-if="isShowJyTable && isSmartxMain == false && accountTransactionsDetail">
                <div class="left smart_main" v-if="isSmartxMain == false">
                    <!-- <div>交易详情</div> -->
                    <div class="main_flex">
                        <div class="flex">
                            <span class="label">{{ $setI18n('lang_br_transactionHash','交易哈希') }}</span>
                            <span class="cont smart_container_pc">{{ accountTransactionsDetail.hash }}</span>
                            <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.hash && accountTransactionsDetail.hash.substring(0,20) + '...' }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_br_transactionType','交易类型') }}</span>
                            <span class="cont">{{ accountTransactionsDetail.type }}</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_nonce','交易序号')}}</span>
                            <span class="cont">{{ accountTransactionsDetail.nonce }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_br_fromer','转入方')}}</span>
                            <span class="cont smart_container_pc">{{ accountTransactionsDetail.addressIn}}</span>
                            <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressIn && accountTransactionsDetail.addressIn.substring(0,20) + '...' }}</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_toer','转出方')}}</span>
                            <span class="cont smart_container_pc ">{{ accountTransactionsDetail.addressOut }}</span>
                            <span class="cont smart_container_tableList_phone">{{ accountTransactionsDetail.addressOut && accountTransactionsDetail.addressOut.substring(0,20) + '...' }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_value','金额')}}</span>
                            <span class="cont" v-if="accountTransactionsDetail.type !='contract'">{{ accountTransactionsDetail.amount }} SAT</span>
                            <span class="cont" v-else>{{accountTransactionsDetail.data &&  accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',')[accountTransactionsDetail.data.substring(accountTransactionsDetail.data.indexOf('(') + 2,accountTransactionsDetail.data.indexOf(')') - 1).split(',').length-1].substring(1)}} {{accountTransactionsDetail.temp && accountTransactionsDetail.temp[0]}}</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_extend','附加信息')}}</span>
                            <span class="cont">{{ accountTransactionsDetail.data }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_br_gas','燃料费')}}</span>
                            <span class="cont">{{ accountTransactionsDetail.gas }} SAT</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_blockHeigh','块高度')}}</span>
                            <span class="cont">{{ accountTransactionsDetail && accountTransactionsDetail.height }}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_time','时间')}}</span>
                            <span class="cont">{{ formatTime(accountTransactionsDetail.timestamp,'YYYY-MM-dd hh:ss:mm') }}</span>
                        </div>
                        <div class="flex">
                            <span class="label">{{$setI18n('lang_br_remarks','备注')}}</span>
                            <span class="cont">{{accountTransactionsDetail.remarks}}</span>
                        </div>
                        <div class="flex gray">
                            <span class="label">{{$setI18n('lang_status','状态')}}</span>
                            <span class="cont">{{$setI18n('lang_success','成功')}}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- RoadMap -->
            <div class="max_width pcshow" style="margin-bottom: 50px;" v-if="isStart">
                <div class="max_width" style="height: 55px;">
                    <div style="color: #676767;display: inline-block;font-size: 18px">
                        Main version of SmartX-dotnet network launch 2021.4
                    </div>
                    <div style="float: right;color: #000;font-size: 18px">
                        100%
                    </div>
                    <div class="max_width" style="height: 14px;background-color: #000000"/>
                </div>
                <img src="../../assets/RoadMap.png">
            </div>


            <div class="box pcshow" v-if="isStart">
                <div class="cont">
                    <div class="footer">© 2020 SmartX Community.</div>
                    <div>
                        <ul class="social">
                            <li><a target="_blank" href="https://twitter.com/SmartXOne"><i
                                    class="iconfont icon-twitter"></i> </a></li>
                            <li><a target="_blank" href="https://www.facebook.com/SmartX.OneOfficial"><i
                                    class="iconfont icon-facebook"></i> </a></li>
                            <li><a target="_blank" href="https://github.com/smartx-core"><i
                                    class="iconfont icon-github"></i></a></li>
                            <li><a target="_blank" href="https://t.me/smartx_en"><i class="iconfont icon-telegram"></i></a>
                            </li>
                            <li><a target="_blank" href="https://medium.com/smartx"><i class="iconfont icon-medium"></i></a>
                            </li>
                            <li><a target="_blank" href="https://discord.gg/JymqJyS"><i
                                    class="iconfont icon-discord"></i></a></li>
                            <li><a target="_blank" href="mailto:social@smartx.one"><i
                                    class="iconfont icon-email"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
  import TopNav from './topNav/topNav.vue';
  import i18n from '@/locale';
  import {mapGetters, mapActions} from 'vuex';
  import Utils from '@/utils/index';
  import BarChart1Png from '@/assets/images/public/BarChart1.png';
  import BarChart2Png from '@/assets/images/public/BarChart2.png';
  import BarChart3Png from '@/assets/images/public/BarChart3.png';
  import BarChart4Png from '@/assets/images/public/BarChart4.png';
  import BarChart5Png from '@/assets/images/public/BarChart5.png';
  import MapPng from '@/assets/images/public/Map.png';
  import smartxLogoPng from '@/assets/images/public/smartx-logo.png';
  import {log} from '@/lib/utils';

  @Component({
    components: {
      TopNav
    },
    methods: {
      ...mapActions([
        'globalInfoRequestAction',
        'getLatestBlockRequestAction',
        'getGlobalNodeDistInfoRequestAction',
        'getLatestBlockHeightRequestAction',
        'getAccountTransactionsRequestAction',
        'getAccountTransactionsDetailRequestAction',
        'getbalanceRequestAction',
        'getTXBlockRequestAction',
        'getAccountTransactionsAnotherRequestAction',
        'getNumberOfSlicesRequestAction'
      ])
    }
  })
  export default class Generalization extends Vue {
    private getSmartxLogoPng: any = smartxLogoPng;

    /** 用户输入的地址; */
    private addressParms: String = '';
    /** 图片 */
    private getBarChart1Png = BarChart1Png;
    private getBarChart2Png = BarChart2Png;
    private getBarChart3Png = BarChart3Png;
    private getBarChart4Png = BarChart4Png;
    private getBarChart5Png = BarChart5Png;
    private getMapPng = MapPng;

    /** 获取的概览的字段 */
    private topList: Object = {};
    private top4: any = {blockNumber: 0};
    /** 当前主块 */
    private currentBlock: any = null;
    /** 最近出块 */
    private tableList: Array<object> = [];
    /** 节点分布 */
    private nodeDistInfoList: Array<object> = [];
    /** 交易信息 */
    private accountTransactionsDetail: any = null;
    /** 查询地址 */
    private accountTransactionsList: any = null;
    /** 代币交易 */
    private accountList: Array<object> = [];
    /** 账户余额 */
    private money: any = null;
    /** 当前选中的区块 */
    private selectIndex: any = null;
    /** 是否显示默认列表 */
    private isShowDefalutTable: boolean = false;
    /** 是否显示交易列表 */
    private isShowJyTable: boolean = false;
    /** 是否显示代币交易分页 */
    private pageShow: boolean = false;
    /** 是否显示地址列表 */
    private isShowDzTable: boolean = false;
    private exchangeRateRatio: any = 1;
    /** 判断返回的btype类型是main还是txs */
    private isSmartxMain: boolean = false;

    private mctxlist: boolean = false;

    private titleBar: string = '';
    /** 头部筛选下拉框 */
    private selectAll: Array<object> = [];

    /** 最近出块 */
    private totalPage: any = null;
    private name1: string = 'name1';
    private name: string = 'name1';
    private columns: Array<object> = [];

    /** 主块交易 */
    private columns1: Array<object> = [];

    /** 普通交易 */
    private columns2: Array<object> = [];

    /** 代币交易 */
    private columns3: Array<object> = [];
    private columns3_phone: Array<object> = [];

    /** 改变 */
    private isStart: boolean = false;
    private nowIndex: number = 1;
    private lang = 'ZH';

    /** 拷贝成功 */
    private onCopySuccess(): void {
      this.$Message.success('复制成功');
    }

    /** 初始化函数 */
    private mounted(): void {
      let _lang = Utils['getUrlParam']('lang');
      this.lang = _lang ||'ZH';
      this.$i18n['locale'] = (this.lang === 'ZH') ? 'zh-CN' : 'en-US';

      let _index = Utils['getUrlParam']('index');
      this.nowIndex = parseInt(_index) || 1;
      console.log('this.nowIndex = ' + this.nowIndex);
      this.changeLangEvent();
      this.titleBar = this['$setI18n']('lang_br_LastBlock', '最近出块');

      (async () => {
        /** 基础的一些数据 */
        this.top4.blockNumber = await this['getNumberOfSlicesRequestAction']();//获取分片数
        this.topList = await this['globalInfoRequestAction']();
        console.log('toplist=');
        console.log(this.topList);
        /** 最近出块 */
        let _res = await this['getLatestBlockRequestAction'](this.nowIndex);
        this.isStart = true;
        if (_res) {
          console.log('初始化_res=');
          console.log(_res);
          this.tableList = _res;
          this.totalPage = _res[0] && _res[0].height + 1;
          console.log(this.totalPage);
          this.isShowDefalutTable = true;
        }
      })();
    }
    private handleGotoIndex(): void {
      this.$router.push({ path: "/browser?lang="+this.lang });

      window.setTimeout(() => {
        window.location.reload();
      }, 600);
    }

    private changeLangEvent(): void {

      this.lang = this.$i18n['locale'] === 'zh-CN' ? 'ZH' : 'EN';
      console.log(this.titleBar, '-----titleBar');
      if (this.titleBar == '账户信息' || this.titleBar == 'Account info') {
        this.titleBar = this['$setI18n']('lang_br_accountInfo', '账户信息');
      } else if (this.titleBar == '交易信息' || this.titleBar == 'Transaction info') {
        this.titleBar = this['$setI18n']('lang_br_transactionInfo', '交易信息');
      } else {
        this.titleBar = '';//this['$setI18n']('lang_br_LastBlock', '最近出块')
      }
      this.selectAll = [{
        text: this['$setI18n']('lang_br_allScreening', '全部筛选'),
        index: 0,
        state: 1
      }, {
        text: this['$setI18n']('lang_br_address', '地址'),
        index: 1,
        state: 0
      }, {
        text: this['$setI18n']('lang_br_transaction', '交易'),
        index: 2,
        state: 0
      }];
      this.columns1 = [
        {
          title: this['$setI18n']('lang_hash', '交易哈希'),
          key: 'hash',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_br_toer', '转出方'),
          key: 'addressOut',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_br_fromer', '转入方'),
          key: 'addressIn',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_value', '金额'),
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_time', '时间'),
          slot: 'timestamp'
        },
        {
          title: '操作',
          key: 'state',
          fixed: 'right',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                },
                style: {
                  marginRight: '5px',
                },
                on: {
                  click: () => {
                    this.selected(params.row);
                  }
                }
              }, '详情'),

            ]);
          }
        }
      ];
      this.columns2 = [
        {
          title: this['$setI18n']('lang_hash', '交易哈希'),
          slot: 'hash',
          // tooltip: true,
        },
        {
          title: this['$setI18n']('lang_value', '金额'),
          // width: 140,
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_br_transactionType', '交易类型'),
          width: 120,
          slot: 'type'
        }
      ];
      this.columns3 = [
        {
          title: this['$setI18n']('lang_hash', '交易哈希'),
          slot: 'hash'
        },
        {
          title: this['$setI18n']('lang_value', '金额'),
          // width: 120,
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_value_name', '代币名'),
          width: 90,
          slot: 'name'
        },
        {
          title: this['$setI18n']('lang_br_transactionType', '交易类型'),
          width: 120,
          slot: 'type'
        }
      ];
      this.columns3_phone = [
        {
          title: this['$setI18n']('lang_hash', '交易哈希'),
          slot: 'hash'
        },
        {
          title: this['$setI18n']('lang_value', '金额'),
          slot: 'amount'
        },
        {
          title: this['$setI18n']('lang_value_name', '代币名'),
          slot: 'name'
        },
        {
          title: this['$setI18n']('lang_br_transactionType', '交易类型'),
          slot: 'type'
        }
      ];
      this.columns = [
        {
          title: this['$setI18n']('lang_br_blockHeigh', '块高度'),
          width: 100,
          key: 'height'
        },
        {
          title: this['$setI18n']('lang_br_hash', '哈希值'),
          key: 'hash',
          tooltip: true,
        },
        {
          title: this['$setI18n']('lang_br_transactionNumber', '交易笔数'),
          width: 160,
          slot: 'vmCount'
        },
        {
          title: this['$setI18n']('lang_br_blockNumber', '分片数'),
          width: 120,
          slot: 'linksblk'
        },
        {
          title: this['$setI18n']('lang_time', '时间'),
          width: 200,
          slot: 'timestamp'
        },
        {
          title: this['$setI18n']('lang_br_broadcasts', '播报方'),
          // width: 260,
          key: 'Address',
          tooltip: true
        }
      ];
    }

    /** 搜索 */
    private async handleSearch(): Promise<any> {
      if (this.addressParms == '') {
        this.$Message.warning('Please input anything!');
        return;
      }
      let _select = this.selectAll.filter(_item => _item['state'] == 1);
      this.selectIndex = _select[0]['index'];
      console.log('select=' + this.selectIndex);
      //alert(this.selectIndex);

      if (this.selectIndex == 0) {
        try {
          //先查主块
          // 请求主块失败抛出异常
          await this['getAccountTransactionsDetailRequestAction'](this.addressParms);
          this.isStart = false;
          window.location.href = 'browser/McMainBlockInformation?blockhash=' + this.addressParms+"&lang="+this.lang;
        } catch (err) {
          //如果主块查不到 查交易块
          try {
            await this['getTXBlockRequestAction'](this.addressParms);
            this.isStart = false;
            window.location.href = 'browser/TransactionDetails?hash=' + this.addressParms+"&lang="+this.lang;
          } catch (err) {
            // 查账户
            this.isStart = false;
            window.location.href = 'browser/AddressSearch?address=' + this.addressParms+"&lang="+this.lang;
          }
        }
      } else {
        window.location.href = 'browser/AddressSearch?address=' + this.addressParms+"&lang="+this.lang;
      }
    }

    /** 跳到对应的钱包地址 */
    private handleGotoAddressInfor(): void {
      this.$router.push({path: '/browser/addressInformation', query: {'address': String(this.addressParms)}});
    }

    /** 分页查询 */
    private handleChange(index) {
      console.log(index);
      (async () => {
        /** 最近出块 */
        let _res = await this['getLatestBlockRequestAction'](index);
        console.log('index=' + index);
        window.location.href = 'browser?index=' + (index).toString()+"&lang="+this.lang;

      })();
    }

    /** 账户 分页查询 */
    private handleChangeAcount(index) {
      console.log(index);
      (async () => {

        /** 获取全网高度 */
          // let _height = await this['getLatestBlockHeightRequestAction']();

        let _res = await this['getAccountTransactionsRequestAction']({
            height: 0,
            address: this.addressParms,
            index: index - 1,
          });
        console.log(_res, _res.transactionList);
        if (_res) {
          this.accountTransactionsList = _res;
          this.pageShow = false;
          this.currentBlock = _res && _res[0].height;
        }
      })();
    }

    /** 代币交易 分页查询 */
    private handleChangeMoneyAcount(index) {
      console.log(index);
      (async () => {

        let _res = await this['getAccountTransactionsAnotherRequestAction']({
          address: this.addressParms,
          index: index - 1,
        });
        console.log(_res);
        if (_res) {
          this.accountList = _res;
          this.pageShow = true;
          this.currentBlock = _res[0] && _res[0].height;
        }
      })();
    }

    private changeTabs(name) {
      console.log(name);
      if (name == 'name2') {
        this.name = 'name2';
        this.handleChangeMoneyAcount(1);
      } else {
        this.name = 'name1';
        this.handleChangeAcount(1);
      }

    }

    /** 切换下拉框 */
    private handleClickSelect(_index: number) {
      let _emtry: Array<object> = [];
      this.selectAll.forEach(_item => {
        if (_index == _item['index']) {
          _item['state'] = 1;
        } else {
          _item['state'] = 0;
        }
      });
      this.selectAll = _emtry.concat(this.selectAll);
      console.log(this.selectAll);
    }

    private rowClassName(row, index) {
      if ((index) % 8 === 0) {
        return 'table-row-blue';
      } else if ((index) % 8 === 2) {
        return 'table-row-green';
      } else if ((index) % 8 === 4) {
        return 'table-row-red';
      } else if ((index) % 8 === 6) {
        return 'table-row-yellow';
      }
      return '';
    }

    private formatTime(_time, _format) {
      //console.log(Utils['formatTime'](new Date(parseInt(_time)), _format));
      var d = new Date();
      // var offset = d.getTimezoneOffset() * 60000;
      // _time = _time + offset;
      return Utils['formatTime'](new Date(parseInt(_time)), _format);
    }

    private async selected(item) {
      let _res = await this['getTXBlockRequestAction'](item.hash);
      if (_res == 'false') {
        return;
      }
      this.mctxlist = false;
      this.isSmartxMain = false;
      this.isShowJyTable = true; // 控制单个主块css显示
      this.addressParms = item.hash;

      this.isShowDzTable = false;
      this.titleBar = this['$setI18n']('lang_br_transactionInfo', '交易信息');


      this.accountTransactionsDetail = _res;
      this.currentBlock = _res && _res.height;
    }

    private async initData(page) {
      /** 最近出块 */
      let _res = await this['getLatestBlockRequestAction']();
      if (_res) {
        console.log('初始化_res=');
        console.log(_res);
        if (_res.ret == 'failed') {
          this.$Message['error']({
            content: _res.ret || 'failed'
          });
        } else {
          this.tableList = _res;
          this.isShowDefalutTable = true;
        }
      }
    }
  }

</script>

<style lang="scss">
    @import 'generalization';
</style>
